import { Select, Input } from "antd";

import { useComponentsStore } from "../../../stores/components";
import { ComponentEvent } from "../../../stores/component-config";
import { useEffect, useState } from "react";

export interface ShowMessageConfig {
    type: 'showMessage'
    config: {
        type: 'success'|'error'
        text: string
    }
}
export interface ShowMessageProps {
    value?: ShowMessageConfig['config']
    onChange?: (config: ShowMessageConfig) => void
}

export const ShowMessage = (props: ShowMessageProps) => {

    const { value, onChange } = props;
    
    const { curComponent, curComponentId, updateComponentProps } = useComponentsStore();

    const [type, setType] = useState<ShowMessageConfig['config']['type']>(value?.type || 'success');
    const [text, setText] = useState<string>(value?.text || '');

    const messageTypeChange = (value: 'success'|'error') => {
        if(!curComponentId) return;

        setType(value)
        onChange?.({
            type: 'showMessage',
            config: {
                type: value,
                text
            }
        })

        /* updateComponentProps(curComponentId, {
            [eventName]: {
                ...curComponent?.props?.[eventName],
                config: {
                    ...curComponent?.props?.[eventName]?.config,
                    type: value
                }
            }
        }) */
    }
    const messageTextChange = (value: string) => {
        if(!curComponentId) return;

        setText(value);
        onChange?.({
            type: 'showMessage',
            config: {
                type,
                text: value
            }
        })

        /* updateComponentProps(curComponentId, {
            [eventName]: {
                ...curComponent?.props?.[eventName],
                config: {
                    ...curComponent?.props?.[eventName]?.config,
                    text: value
                }
            }
        }) */
    }

    useEffect(()=>{
        if(value) {
            setText(value.text);
            setType(value.type);
        }
    }, [value])

    return (
        <div className="mt-[10px]">
            <div className="flex items-center gap-[10px]">
                <div>类型：</div>
                <Select style={{width: 160}}
                    value={type}
                    onChange={(value)=>{ messageTypeChange(value) }}
                    options={[
                        { value: 'success', label: '成功' },
                        { value: 'error', label: '失败' }
                    ]}/>
            </div>
            <div className="flex items-center gap-[10px] mt-[10px]">
                <div>文本：</div>
                <div>
                    <Input value={text}
                        onChange={(e)=>{messageTextChange(e.target.value)}}/>
                </div>
                
            </div>
        </div>
    )
}